/**
 * Created by heshufen on 20/6/27.
 */
import React, {PureComponent} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Horizontal from './Horizontal';
import Input from './Input';

class CaptchaButton extends React.Component {

    state = {waitTime: 0, had: false};

    _onPress = async () => {
        try {
            if (this.state.waitTime == 0) {
                const {getPhoneNum, getCaptcha} = this.props;

                const phone = getPhoneNum();

                if (phone && phone.length > 6) {
                    // const success = await getCaptcha(phone);
                    const success = true;
                    if (success) {
                        this.setState({waitTime: 60, had: true});

                        this.handler = setInterval(() => {
                            if (this.state.waitTime) {
                                this.setState({waitTime: this.state.waitTime - 1});
                            }


                            if (this.state.waitTime < 1) {
                                clearInterval(this.handler);
                                this.handler = null;
                            }

                        }, 1000);
                    }
                } else {
                    alert('请输入有效手机号');
                }
            }
        } catch (e) {
            // toast(e.message)
        }
    };

    componentWillUnmount() {
        if (this.handler) {
            clearInterval(this.handler);
            this.handler = null;
        }
    }

    render() {
        return (<TouchableOpacity onPress={this._onPress}>
            <View style={{justifyContent: 'center', flex: 1}}>
                {this.state.waitTime ? <Text style={styles.waitCaptchaText}>{this.state.waitTime}秒后重发</Text> :
                    <Text style={styles.captchaText}>{this.state.had ? '重新获取' : '获取验证码'}</Text>}
            </View>
        </TouchableOpacity>);
    }
}

export default class CaptchaInput extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
        };
    }

    getValue() {
        return this.state.value;
    }

    render() {
        const {getPhoneNum, getCaptcha} = this.props;
        return (
            <Horizontal style={styles.container}>
                <Input placeholder={this.props.placeholder || '输入验证码'}
                       style={styles.input}
                       placeholderColor="#8c8c8c"
                       onChangeText={(text) => this.setState({value: text})}
                       maxLength={6}
                       keyboardType="numeric"/>
                <CaptchaButton getPhoneNum={getPhoneNum}/>
            </Horizontal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: 277,
        height: 47,
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: 'rgba(0,0,0,0.08)',
    },
    countryCode: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 15,
        color: '#2b2b2b',
    },
    line: {
        marginLeft: 15,
        width: 2,
        height: 21,
        backgroundColor: '#ff2a7d',
    },
    input: {
        flex: 1,
        paddingLeft: 5,
        paddingRight: 10,
        height: 47,
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 15,
        color: '#2b2b2b',
    },
    waitCaptchaText: {
        paddingTop: 5,
        paddingLeft: 7,
        paddingRight: 7,
        paddingBottom: 5,
        borderRadius: 2,
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#628cff',
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 12,
        color: '#628cff',
    },
    captchaText: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 14,
        color: '#628cff',
    },
});

